<!-- gitee.com -->
<script setup lang="ts">
import { text } from 'stream/consumers';
import { ref } from 'vue';

interface ITaskItem {
  id:number;text:string;
  isDone:boolean;isEdit:boolean
}

let vuetext = ref();
let itemText = ref();
let taskList =ref<{id:number,text:string,isDone:boolean,isEdit:boolean}[]>([]);

taskList.value = JSON.parse(window.localStorage.getItem('taskList')??"[]");
function onAddTask(){
  taskList.value.push({
    id: taskList.value.length+1,
    text: vuetext.value,
    isDone:false,
    isEdit:false,
  });
  vuetext.value = '';
}
window.localStorage.setItem('taskList',JSON.stringify(taskList.value));
function onSave(){
  window.localStorage.setItem('taskList',JSON.stringify(taskList.value));
}
function onEdit(item:ITaskItem){
  item.isEdit = true;
  itemText.value = item.text;
}
function onEditOk(item:ITaskItem){
  item.isEdit=false;
  item.text = itemText.value
  onSave();
}
</script>

<template>
  <div class="container">
    <h1>Vue Project</h1>
    <div class="input-row">
      <el-input type="text" style="width: 20em; " placeholder="请输入" v-model="vuetext"/>
      <el-button type = "sucess" @click="onAddTask">添加</el-button>
    </div>
    
    <div class="task-list">
      <div v-for="item of taskList"  class="task-item">
        <template v-if="!item.isEdit">
          <el-checkbox  v-model="item.isDone" size="large">
            {{ item.text }}</el-checkbox>
          <div>
            <el-button type = "primary" @click="onEdit(item)">修改</el-button>
            <el-button type = "danger">删除</el-button>
          </div>
        </template>
        <template v-else>
          <el-checkbox  v-model="item.isDone" size="large">
            <el-input v-model="itemText"></el-input>
            <el-button @click="onEditOk(item)">确定</el-button>
            <el-button @click="item.isEdit=false">取消</el-button>
          </el-checkbox>
        </template>
      </div>
    </div>

  </div>
</template>

<style scoped>
.container{
  display: flex;
  flex-direction: column;
  height: 100vh;
  width: 80%;
  margin: 0 auto;
  background-color: #ceead2;
}
h1{
  text-align: center;
  margin-top: 20px;
}
.input-row{
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 0.5vw;
}
.task-list{
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-bottom: 1px solid #ccc;
}
</style>
